<script setup lang="ts">
/**
 * 使用方法
 * script
import MultipleOperation from '@/components/MultipleOperation'
import { tableDataInit } from '@/common/hooks'
const multipleConfig = reactive([
	tableDataInit.multipleDelete, 
	tableDataInit.multipleSwitchOn, 
	tableDataInit.multipleSwitchOff
])

// 批量删除操作（自定义方法）
const tableDataDeleteEventFn = (rows, isMultipleDeletetFlag) => {}
// 批量启用/禁用操作（自定义方法）
const switchChangeFn = (rows, title, isSwitchOnFlag) => {}

onMounted(() => {
	// 批量删除, isMultipleDeletetFlag 是否批量删除操作
	proxy.$mitt.on('TABLE_MULTIPLE_DELETE_EVENT', rows => {
		const isMultipleDeletetFlag = true
		tableDataDeleteEventFn(rows, isMultipleDeletetFlag)
	})

	// 批量启用 & 禁用, isSwitchOnFlag 是否启用
	proxy.$mitt.on('TABLE_MULTIPLE_SWITCH_EVENT', ({rows, title, isSwitchOnFlag} = {}) => {
		switchChangeFn(rows, title, isSwitchOnFlag)
	})
})

onBeforeUnmount(() => {
	proxy.$mitt.all.delete('TABLE_MULTIPLE_DELETE_EVENT')
	proxy.$mitt.all.delete('TABLE_MULTIPLE_SWITCH_EVENT')
})
 * 
 * template
 * [width] 非必选，默认为100%
 * <MultipleOperation :multipleConfig="multipleConfig" width='1.2rem' /> 
 */

import $mitt from '@/common/emitter'

type MultipleConfigType = {
	key: string
	value: string
}
type MultipleType = {
	multipleConfig: MultipleConfigType[]
	width: string
}
const { multipleConfig, width } = defineProps<MultipleType>()

const vAuth = inject('vAuth')
const multipleOperationValue = ref('')

// 批量操作
const multipleOperationFn = (value: string) => {
	switch(value) {
		case 'multipleDelete':
			$mitt.emit('MULTIPLE_DELETE_EVENT')
			break
		case 'multipleSwitchOn':
			$mitt.emit('MULTIPLE_SWITCH_ON_EVENT')
			break
		case 'multipleSwitchOff':
			$mitt.emit('MULTIPLE_SWITCH_OFF_EVENT')
			break
	}
	multipleOperationValue.value = ''
}
</script>

<template>
	<el-select 
		v-model="multipleOperationValue" 
		placeholder="批量操作" 
		allow-create
		:style="{width: `${width ? width : '100%'}`}" 
		v-show="multipleConfig.length" 
		v-auth 
		@change="multipleOperationFn(multipleOperationValue)" 
	>
		<el-option 
			v-for="(item, index) in multipleConfig" 
			:key="index" 
			:label="item.key" 
			:value="item.value" 
		/>
	</el-select>
</template>